<template>
    <Card :bordered="false" dis-hover class="ivu-mt">
        <Row>
            <Col :xl="{span: 12, offset: 6}" :lg="{span: 12, offset: 6}" :md="{span: 16, offset: 4}"
                 :sm="{span: 20, offset: 2}" :xs="24">
                <Form ref="form" :model="data" :rules="rules" class="ivu-mt" :label-width="labelWidth"
                      :label-position="labelPosition">
                    <FormItem label="报销金额：" prop="userName" label-for="reimbursement">
                        <Input v-model="data.reimbursement" placeholder="请输入金额（必填）" element-id="reimbursement"/>
                    </FormItem>

                    <FormItem label="报销类别：" :rop="dept" label-for="bxlb">
                        <Select v-model="data.bxlb" placeholder="请选择报销类别" element-id="bxlb">
                            <Option value="1">差旅费</Option>
                            <Option value="2">交通费</Option>
                            <Option value="3">办公用品</Option>
                            <Option value="4">运输费</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="费用明细：" prop="moneyDeailys" label-for="moneyDeailys">
                        <Input  type="textarea" :rows="4"  v-model="data.moneyDeailys" placeholder="请输入费用明细描述" element-id="moneyDeailys"/>
                    </FormItem>
                    <FormItem>
                        <Button class="ivu-ml" @click="handleReset(data)">取消</Button>
                        <Button class="ivu-ml" type="primary" :loading="loading" @click="handleSubmit">确定</Button>
                    </FormItem>
                </Form>
            </Col>
        </Row>
    </Card>

</template>

<script>
	export default {
		data() {
			return {
				trafficType: '',
				formItem: {
					checkbox: [],
				},
				data: {
                    reimbursement: '', //报销金额
                    bxlb: '1', //报销类别
                    moneyDeailys: '', //明细
				},
				loading: false,
				rules: {
                    reimbursement: [
						{required: true, message: '请输入报销金额', trigger: 'blur'}
					],
                    bxlb: [
						{required: true, message: '请选择报销类别', trigger: 'blur'}
					],
                    moneyDeailys: [
						{required: true, message: '请输入报销明细', trigger: 'blur'}
					],
				},
			}
		},
		computed: {
			labelWidth() {
				return this.isMobile ? undefined : 140;
			},
			labelPosition() {
				return this.isMobile ? 'top' : 'left';
			}
		},
		created() {
			let baseData = this.$route.params.item;
			let myIndex = this.$route.params.myIndex;
			console.log(myIndex);
			//是否编辑渲染
			if (myIndex) {
				this.data.contractId = baseData.positionName;
				this.data.mechanismOwner = baseData.mechanismOwner;

			}
		},
		methods: {
			//新增
			handleSubmit() {
				this.$refs.form.validate((valid) => {
					if (valid) {
						this.loading = true;
						positionList.save({})
							.then(res => {
								// 返回数据
								console.log(res);
								this.loading = false;
							})
							.catch(err => {
								// 异常情况
							})
						/* roleList.roleSave({
                             roleList.roleSave({
                                 jsmc: , //角色名称
                                 syjgdw: , //适用机构单位（1-机构;2-单位/防控主体）
                                 syjgdwlx: , //适用机构单位类型（
                                 syjgdw: , //适用机构单位级别（1-一级；2-二级；3-三级；1-总队；2-支队；3-大队；4-中队）
                                 jslx: , //角色类型（1-系统角色；2-工单角色；3-公众角色）
                                 bz: , //备注（可选）
                                 jsTywysbm: , //角色通用唯一识别码（可选）
                                 pxzd: , //排序字段（可选）
                                 zt: , //状态
                                 cdIdArray: , //菜单通用唯一识别码数组


                             })

                         })*/
						/*   setTimeout(() => {
                               this.$Message.success('出差申请提交成功!');
                               this.loading = false;
                           }, 2000);*/
					} else {
						this.loading = false;
					}
				});
			},
			// 新增数据
			handleCreate () {
				this.$refs.create.validate((valid) => {
					if (valid) {
						if (this.updateIndex < 0) {
							// 新建
							const mockData = this.mockOneData();
							mockData.desc = this.createData.desc;
							mockData.date = new Date();
							this.list.splice(0, 0, mockData);
							this.$Message.success('创建成功');
						} else {
							// 修改
							const updateItemName = this.dataWithPage[this.updateIndex].name;
							const updateItemIndex = this.list.findIndex(item => item.name === updateItemName);
							this.list[updateItemIndex].desc = this.createData.desc;
							this.$Message.success('修改成功');
						}

						this.showCreate = false;
						this.creating = false;
						this.$nextTick(() => {
							this.creating = true;
						});
					} else {
						this.creating = false;
						this.$nextTick(() => {
							this.creating = true;
						});
					}
				});
			},
			//取消
			handleReset(name) {
				// this.$refs[name].resetFields();
				this.$router.push('/employee/comuser')
			},

		}

	}
</script>

<style scoped>

</style>
